<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.css">
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/skins/skyblue/dhtmlx.css">
    <script src="../../../js/jquery-3.4.1.js"></script>

    <style>

        .room-center {
            width: 500px;
            border: 1px solid black;
        }

        .my-center {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 300px;
            align-items: center;
            border: 1px solid black;
            border-radius: 3px;
            margin: 5px;
            text-align: center;
        }

        .my-center > * {
            margin: 5px;
        }

        .my-center textarea {
            width: 200px;
            height: 100px;
        }

        .my-center button {
            width: 100px;
        }

    </style>
    <script src="../../../js/lodash.js"></script>
</head>
<body style="text-align: center;">
<div class="room-center">
    <div>
        <h3>通过dhtmlXComboFromSelect方法创建一个combo</h3>
    </div>
    <div style="text-align: center; margin: 3px;">
        <!--
        说明:
            1. combo无法直接通过css调整样式;
        -->
        <select style='width:150px; margin-left: 10px;'  id="combo_zone1" name="alfa1">
            <option value="1">a00</option>
            <option value="2">a01</option>
        </select>
    </div>
</div>

<div class="room-center">
    <div>
        <h3>通过dhtmlXCombo方法创建一个combo</h3>
    </div>
    <div style="text-align: center; margin: 3px;">
        <!--
        说明:
            1. combo无法直接通过css调整样式;
        -->
        <div id="combo_zone2" style="width:200px; height:30px;"></div>
    </div>
    <div class="my-center">
        <textarea id="value_area"></textarea>
        <button onclick="getComboValue()">获取所选择的value</button>
    </div>
    <div class="my-center">
        <textarea id="text_area"></textarea>
        <button onclick="getComboText()">获取所选择的text</button>
    </div>
    <div class="my-center">
        <button onclick="setDisable()">禁用</button>
        <button onclick="setEnable()">使能</button>
    </div>
</div>
<div class="room-center">
    <div>
        <h3>从本地过滤</h3>
    </div>
    <div class="my-center">
        <div id="combo_zone3" style="width:200px; height:30px;"></div>
    </div>
</div>
<div class="room-center">
    <div>
        <h3>从后台过滤</h3>
    </div>
    <div class="my-center">
        <div id="combo_zone4" style="width:200px; height:30px;"></div>
    </div>
    <input id="cc1" type="text" />
</div>

<script>

    var myCombo1 = dhtmlXComboFromSelect("combo_zone1");

    var myCombo2 = new dhtmlXCombo("combo_zone2", "alfa2", 200);
    myCombo2.addOption([
        ["a","通过数组方式添加a"],
        ["b","通过数组方式添加b(设置字体红色)", "color:red;"]
    ]);

    // 第一个参数是value, 第二个参数是text, 第三个参数是设置css(不是css表达式)
    myCombo2.addOption("c", "通过字符串方式添加c", 'color:red;');
    // 不允许自由输入字符
    myCombo2.allowFreeText(false);

    function getComboValue() {
        $('#value_area').val(myCombo2.getActualValue());
    }

    function getComboText() {
        $('#text_area').val(myCombo2.getComboText());
    }

    function setDisable() {
        myCombo2.disable();
    }

    function setEnable() {
        myCombo2.enable();
    }

    var myCombo3 = new dhtmlXCombo("combo_zone3", "alfa2", 200);
    myCombo3.addOption([
        ["1","text1"],
        ["2","text2"],
        ["3","text3"],
        ["11","text12"],
        ["12","text12"],
    ]);

    myCombo3.attachEvent("onKeyPressed", function(keyCode){
        if (13 === keyCode) {
            myCombo3.filter(function(opt) {
                console.log(opt.text);
                var value = myCombo3.getComboText();
                if (value === "") {
                    return true;
                }
                return opt.text.indexOf(value) !== -1;
            }, false);
        }
    });

    var myCombo4 = new dhtmlXCombo("combo_zone4", "alfa2", 200);

    myCombo4.attachEvent("onChange", function(value, text){
        console.log(value, text);
    });

    document.getElementById("cc1").addEventListener('input', _.debounce(function () {
        console.log($("#cc1").val());
        $.ajax({
            url: "./value.json",
            data: {
                text: $("#cc1").val()
            },
            dataType: "json",
            success: function (data) {

            }
        });
    }, 250));

</script>
</body>
</html>